<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for遍历数组</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- item为值    index为下标   遍历数组-->
			<p v-for="(item,index) in names">{{index+1}}---{item}}</p>
			<!-- 遍历对象 如果只是获取一个值  那么获取的是value-->
			<p v-for="ite in obj">{{ite}}</p>
			<!-- 如果获取key    -->
			<p v-for="(ite,key) in obj">{{ite}}---{{key}}</p>
			<!-- 获取value  key  index -->
			<p v-for="(ite,key,index) in obj">{{ite}}---{{key}}--{{index}}</p>
			<button type="button" @click="btnClick()">按钮</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					names:['xie','ying','peng','ni','hao'],
					obj:{
						name:'xie',
						age:21,
						weight:118
					}
				},
				methods:{
					/* 响应方法 */
					//1.push方法   添加值
					btnClick(){
						this.names.push('ppp');
					}
					//2.pop()方法  this.names.pop() 删除最后一个
					//3.shift()方法  删除第一个
					//4.unshift()添加到第一个元素
					//5.splice  删除 /插入/替换元素
					//删除元素  第二个参数传入你要删除几个元素
					//splic(start)
					// 替换元素 第二个参数  表示我们要 替换几个元素  用于替换前面的元素
					//splic(1,3)替换元素
					//插入元素  第二个参数 插入0  后面跟上我们要插入的值就行
					//splic(1,0,'x','x')
					
					
				}
			});
		</script>
	</body>
</html>
